<template>
  <basic-layout title="预约详情" :showAddBtn="false">
    <div class="body_box">
      <div class="main">
        <div class="head">
          <div class="picStyle" v-if="paramData.orderStatus == '1'"/>
          <div class="f" v-if="paramData.orderStatus == '1'">
            恭喜您，预约成功
          </div>

          <div class="picStyleCancel" v-if="paramData.orderStatus == '2'"/>
          <div class="f" v-if="paramData.orderStatus == '2'">
            已退回
          </div>

          <div class="picStyle" v-if="paramData.orderStatus == '3'"/>
          <div class="f" v-if="paramData.orderStatus == '3'">
            已完成服务
          </div>

          <div class="picStyle"
               v-if="paramData.orderStatus == '4' && paramData.isPropertyReturn && paramData.isPropertyReturn == '1'"/>
          <div class="f"
               v-if="paramData.orderStatus == '4' && paramData.isPropertyReturn && paramData.isPropertyReturn == '1'">
            订单已被服务点退回
          </div>

          <div class="picStyle"
               v-if="paramData.orderStatus == '4' && (!paramData.isPropertyReturn || paramData.isPropertyReturn != '1')"/>
          <div class="f"
               v-if="paramData.orderStatus == '4' && (!paramData.isPropertyReturn || paramData.isPropertyReturn != '1')">
            取消成功
          </div>

          <div class="s">
            订单号:&nbsp;&nbsp;{{ paramData.orderNo }}
          </div>
        </div>

        <div class="fContentMain">
          <div class="contentC">
            <div class="title">
              <div>服务项目</div>
              <div>{{ paramData.srvitemTypeLabel }}</div>
            </div>

            <div class="title">
              <div>预约时间</div>
              <div>{{ paramData.serviceDate }}</div>
            </div>

            <div class="title">
              <div>姓名</div>
              <div>{{ paramData.booker }}</div>
            </div>

            <div class="title">
              <div>手机号</div>
              <div>{{ $infoHiding.handlePhone(paramData.phone) }}</div>
            </div>

            <div class="title">
              <div>服务点</div>
              <div>{{ paramData.propertyName }}</div>
            </div>

            <div class="title">
              <div>留言备注</div>
              <div>{{ paramData.remark }}</div>
            </div>
          </div>
        </div>

        <div class="fContentMainRetreat" v-if="paramData.retreatTime">
          <div class="contentC">
<!--            <div class="title">-->
<!--              <div>退订人</div>-->
<!--              <div>{{ paramData.retreator }}</div>-->
<!--            </div>-->

            <div class="title">
              <div>退订时间</div>
              <div>{{ paramData.retreatTime }}</div>
            </div>

            <div class="title">
              <div>退订原因</div>
              <div>{{ paramData.retreatReason }}</div>
            </div>
          </div>
        </div>
      </div>

<!--      <div class="buttonMain" v-if="paramData.orderStatus == '1'">-->
<!--        <button @click="cancelApp" class="buttonC">-->
<!--          取消预约-->
<!--        </button>-->
<!--      </div>-->
    </div>
  </basic-layout>
</template>
<script>
import {getPropertyServiceOrderInfo} from "@api/srvAssurance/emplcare/apply/order";
import {calcServiceDate} from "@/plugins/utils/formatTime";

export default {
  name: '',
  props: {},
  components: {},
  data() {
    return {
      paramData: {
        orderNo: '',
        propertyName: '',
        orderStatus: '',
        orderStatusLabel: '',
        srvitemTypeLabel: '',
        serviceDate: '',
        phone: '',
        booker: '',
        isPropertyReturn: '',
        remark: '',

        retreator: '',
        retreatTime: '',
        retreatReason: '',

        propertyAddr: '',
        servicePriceLabel: '',
        srvOrderId: ''
      },
    }
  },
  created() {
  },
  beforeMount() {
    if (this.$route.query.param.srvOrderId) {
      this.paramData.srvOrderId = this.$route.query.param.srvOrderId;
      sessionStorage.setItem("eml_care_appDetail", this.paramData.srvOrderId)
    } else {
      this.paramData.srvOrderId = JSON.parse(sessionStorage.getItem("eml_care_appDetail"))
    }
    this.initDetailData();
  },
  computed: {},
  mounted() {
  },
  methods: {
    initDetailData() {
      getPropertyServiceOrderInfo(this.paramData.srvOrderId).then(res => {
        if (res.code === 1000 && res.data) {
          let item = res.data;
          this.paramData.orderNo = item.orderNo;
          this.paramData.propertyName = item.saProperty.propertyName;
          this.paramData.orderStatus = item.orderStatus;
          this.paramData.orderStatusLabel = item.orderStatusLabel;
          this.paramData.srvitemTypeLabel = item.srvitemTypeLabel;
          this.paramData.serviceDate = calcServiceDate(item.serviceBeginDate, item.serviceEndDate, '.');
          this.paramData.phone = item.phone;
          this.paramData.booker = item.booker;
          this.paramData.remark = item.remark;
          this.paramData.isPropertyReturn = item.isPropertyReturn;
          this.paramData.retreator = item.retreator;
          this.paramData.retreatTime = item.retreatTime;
          this.paramData.retreatReason = item.retreatReason;
          this.paramData.propertyAddr = item.saProperty.propertyAddr;
          this.paramData.servicePriceLabel = item.servicePriceLabel;
          this.paramData.srvOrderId = item.srvOrderId;
        } else {
          this.$router.go(-1);
        }
      })
    },

    cancelApp() {
      let paramData = {
        srvOrderId: this.paramData.srvOrderId,
      }
      this.$router.push({
        path: "/emplcare/confirmCancelApp",
        query: {param: paramData}
      })
    },
  },
}
</script>
<style lang="less" scoped>

.body_box {
  background-color: #f9f9f9;
  height: 100%;

  .main {

    .head {
      height: 130px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      padding: 10px 0px;
      background-color: rgb(254, 255, 255);
      flex-direction: column;

      .picStyle {
        background-image: url('../../../../assets/images/app_success.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 65px;
        width: 230px;
      }

      .picStyleCancel {
        background-image: url('../../../../assets/images/app_cancel.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 50px;
        width: 85px;
      }

      .f {
        font-size: 20px;
        font-weight: 600;
      }

      .s {
        font-size: 16px;
        font-weight: 600;
        color: #d9a553;
      }
    }

    .fContentMain {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgb(254, 255, 255);
      color: rgb(51, 51, 51);
      border: 0.1px solid rgb(220, 223, 230);
      border-radius: 6px;
      height: 200px;
      margin: 10px;
      padding: 10px;

      .contentC {
        display: flex;
        align-items: flex-start;
        background: rgb(255, 255, 255);
        color: rgb(51, 51, 51);
        height: 100%;
        flex-direction: column;
        justify-content: space-between;

        .title {
          display: flex;
          width: 100%;
          margin: 5px 10px;


          div:first-child {
            width: 100px;
            color: #878888;
          }

          div:last-child {
            width: calc(100% - 100px);
            font-weight: 500;
          }

        }
      }

    }


    .fContentMainRetreat {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgb(254, 255, 255);
      color: rgb(51, 51, 51);
      border: 0.1px solid rgb(220, 223, 230);
      border-radius: 6px;
      height: 70px;
      margin: 10px;
      padding: 10px;

      .contentC {
        display: flex;
        align-items: flex-start;
        background: rgb(255, 255, 255);
        color: rgb(51, 51, 51);
        height: 100%;
        flex-direction: column;
        justify-content: space-between;

        .title {
          display: flex;
          width: 100%;
          margin: 5px 10px;


          div:first-child {
            width: 100px;
            color: #878888;
          }

          div:last-child {
            width: calc(100% - 100px);
            font-weight: 500;
          }

        }
      }

    }

  }

  .buttonMain {
    text-align: center;
    position: absolute;
    width: 100%;
    //background: #ffffff;
    padding: 10px 0;
    right: 0px;
    bottom: 0px;
    height: 45px;
    z-index: 1;

    .buttonC {
      color: #ffffff;
      background-color: #d9a553;
      border: 1px solid #d9a553;
      border-radius: 20px;
      height: 45px;
      line-height: 45px;
      width: calc(100% - 20px);
      font-size: 17px;
    }
  }


}


</style>
